<template lang="html">
    <section class="todo_box">
      <input type="text" class="add-input" name="" value="" autofocus="autofocus" placeholder="接下来要做什么？" @keyup.enter="addTodo">
      <Item
       :todo="todo"
       v-for="todo in todos"
       :key="todo.id"
      />
      <Tabs :filter="filter"></Tabs>
    </section>
</template>

<script>
import Item from './item.vue'
import Tabs from './tabs.vue'
let id =0;
export default {
  data(){
    return{
      todos:[],
      filter:'all'
    }
  },
  components:{
      Item,
      Tabs,
  },
  methods:{

    addTodo(e){
      console.log(e)
      this.todos.unshift({
        id:id++,
        content:e.target.value.trim(),
        complete:false,

      })
      e.target.value = ''

    }
  }
}
</script>

<style lang="css">
.todo_box{
  background-color: #fff;
  width: 800px;
  height: auto;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
}
.add-input{
  width: 80%;
  border: 1px solid #999;
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  font-size: 30px;
  outline: none;
}
</style>
